<template>
    <div class="app-container userinfo">
        <div v-show="isshow">
            <el-form ref="form" :model="form" :rules="rules" label-width="120px" :disabled="isshows">
                <div class="container">
                    <div class="container col-3">
                        <el-form-item label="企业名称" prop="companyName">
                            <el-input v-model="form.companyName" placeholder="请输入企业名称" maxlength="30" />
                        </el-form-item>
                        <el-form-item class="fl" label="营业开始期限" prop="operatingStartTime">
                            <el-date-picker clearable size="small" v-model="form.operatingStartTime" type="date" format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            placeholder="选择营业开始期限"> </el-date-picker>
                        </el-form-item>
                        <el-form-item class="fl" label="营业结束期限" prop="operatingEndTime">
                            <el-date-picker clearable size="small" v-model="form.operatingEndTime" type="date"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd" placeholder="选择营业结束期限"> </el-date-picker>
                        </el-form-item>

                        <!--                    <el-form-item
                        class="container fl"
                        label="所在省"
                        prop="addressProvice"
                    >
                        <el-select
                            v-model="form.addressProvice"
                            placeholder="请选择所在省"
                            @change="changecity($event)"
                        >
                            <el-option
                                v-for="dict in provinceOptions"
                                :key="dict.areaId"
                                :label="dict.areaName"
                                :value="dict.areaId"
                            ></el-option>
                        </el-select>
                    </el-form-item> -->
                        <!--                    <el-form-item class="fl" label="所在市" prop="addressCity">
                        <el-select
                            v-model="form.addressCity"
                            placeholder="请选择所在市"
                            @change="changearea($event)"
                        >
                            <el-option
                                v-for="dict in cityOptions"
                                :key="dict.areaId"
                                :label="dict.areaName"
                                :value="dict.areaId"
                            ></el-option>
                        </el-select>
                    </el-form-item> -->
                        <!--                    <el-form-item class="fl" label="所在区" prop="addressArea">
                        <el-select
                            v-model="form.addressArea"
                            placeholder="请选择所在区"
                        >
                            <el-option
                                v-for="dict in areaOptions"
                                :key="dict.areaId"
                                :label="dict.areaName"
                                :value="dict.areaId"
                            ></el-option>
                        </el-select>
                    </el-form-item> -->
                    </div>
                    <div class="container col-3">
                        <el-form-item label-width="120px" label="经营范围" prop="businessScope">
                            <el-input v-model="form.businessScope" placeholder="请输入经营范围" maxlength="100" />
                        </el-form-item>
                        <el-form-item class="fl" label="统一社会信用代码" prop="companyCode" label-width="140px">
                            <el-input v-model="form.companyCode" placeholder="请输入统一社会信用代码" maxlength="18" />
                        </el-form-item>
                        <!--                   <el-form-item
                        class="fl address"
                        label="详细地址"
                        prop="address"
                    >
                        <el-input
                            style="width: 315%;"
                            v-model="form.address"
                            placeholder="请输入详细地址"
                        />
                    </el-form-item> -->
                    </div>
                    <div class="container  col-3">
                        <el-form-item class="fl" label="法人姓名" prop="legalPerson">
                            <el-input v-model="form.legalPerson" placeholder="请输入法人姓名" maxlength="20" />
                        </el-form-item>
                        <!-- <el-form-item
                        class="fl"
                        label="法人手机号"
                        prop="legalPhone"
                    >
                        <el-input
                            v-model="form.legalPhone"
                            placeholder="请输入法人手机号"
                        />
                    </el-form-item> -->
                        <el-form-item class="fl" label="法人身份证号" prop="legalIdcard">
                            <el-input v-model="form.legalIdcard" placeholder="请输入法人身份证号" maxlength="18" />
                        </el-form-item>
                    </div>
                </div>

                <div class="col-3">
                    <el-form-item class="fl" label="联系人" prop="contactPerson">
                        <el-input v-model="form.contactPerson" placeholder="请输入联系人" maxlength="30" />
                    </el-form-item>
                    <el-form-item class="fl" label="联系方式" prop="contactPhone">
                        <el-input v-model="form.contactPhone" placeholder="请输入联系方式" maxlength="11" />
                    </el-form-item>
                </div>

                <div class="container col-3">
                    <el-form-item class="fl" label="公司网址" prop="companyWeb">
                        <el-input v-model="form.companyWeb" placeholder="请输入公司网址" maxlength="100" />
                    </el-form-item>
                    <el-form-item class="fl" label="公司邮箱" prop="contactEmail">
                        <el-input v-model="form.contactEmail" placeholder="请输入公司邮箱" maxlength="50" />
                    </el-form-item>

                    <!-- <el-form-item
                        class="fl"
                        label="公司座机"
                        prop="companyPhone"
                    >
                        <el-input
                            v-model="form.companyPhone"
                            placeholder="请输入公司座机"
                        />
                    </el-form-item> -->
                </div>

                <el-form-item label-width="120px" label="公司简介" prop="companyIntro">
                    <el-input rows="10" type="textarea" placeholder="请输入公司简介" v-model="form.companyIntro" maxlength="500" show-word-limit> </el-input>
                </el-form-item>

                <div class="col-3">
                    <el-form-item label="公司注册地国家" prop="registerCountry">
                        <el-select v-model="form.registerCountry" placeholder="请输入注册地国家">
                            <el-option v-for="(item, index) in CountryOptions" :key="index" :label="item.name" :value="item.name"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div class="col-3">
                    <el-form-item label-width="120px" label="法人身份证附件">
                        <!-- prop="legalIdcardFile" -->
                        <el-upload
                            :limit="2"
                            ref="legalIdcardFile"
                            :headers="headers"
                            :on-success="idcardUploadSuccess"
                            :file-list="legalIdcardFile"
                            :action="uploadImgUrl"
                            :before-upload="fieldBeforeUpload"
                            :on-remove="idcardRemove"
                            :on-change="fileChange"
                            list-type="picture-card"
                            :on-exceed="testfun"
                        >
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>

                    <el-form-item label-width="120px" label="企业营业执照">
                        <!-- prop="legalOperateFile" -->
                        <el-upload :limit="2" ref="legalOperateFile" :headers="headers" :on-success="operateUploadSuccess" :file-list="form.legalOperateFile" :action="uploadImgUrl" :before-upload="fieldBeforeUpload" :on-remove="operateRemove" list-type="picture-card" :on-exceed="testfuns">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                </div>
            </el-form>
            <div class="test">
                <p>注：</br>&nbsp;&nbsp;&nbsp;1.法人身份证附件和企业营业执照每个最多上传2张；</br>&nbsp;&nbsp;&nbsp;2.每张图片不能大于3M；</p>
            </div>
            <div slot="footer" class="dialog-footer" v-show="!isshows">
                <div>
                    <el-checkbox v-model="checked">
                        <span>请勾选</span>
                        <span @click="getAgreement()" style="color:#409EFF;">《电子会员协议》</span>
                    </el-checkbox>
                </div>
                <div style="margin: 20px;">
                    <el-button type="primary" @click="submitForm" :disabled="!checked">提交认证</el-button>
                </div>
                <!-- <el-button @click="saveBtn">保存</el-button> -->
            </div>
        </div>
        <!-- 电子会员协议 -->
        <el-dialog title="电子会员协议" :visible.sync="dialogVisible" width="60%">
            <span v-html="getAgreementCon"></span>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { listUserinfo, getUserinfo, delUserinfo, addUserinfo, updateUserinfo, exportUserinfo } from '@/api/biz/userinfo';
import { getToken } from '@/utils/auth';
import { getInfo, Agreements } from '@/api/login';
import { Agreements2 } from '@/api/biz/agreements.js';

export default {
    name: 'Userinfo',
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 总条数
            total: 0,
            // 用户详情表格数据
            userinfoList: [],
            legalIdcardFile: [],
            legalOperateFile: [],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            provinceOptions: [],
            areaOptions: [],
            cityOptions: [],

            fileUploadAction: '/dev-api/web/fileUpload',
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10
            },
            uploadImgUrl: process.env.VUE_APP_BASE_API + '/common/upload', // 上传的图片服务器地址
            headers: {
                Authorization: 'Bearer ' + getToken()
            },
            // 表单参数
            form: {},
            CountryOptions: [{ id: 1, name: '中国' }, { id: 2, name: '日本' }, { id: 3, name: '韩国' }, { id: 4, name: '美国' }, { id: 5, name: '英国' }, { id: 6, name: '法国' }, { id: 7, name: '德国' }, { id: 8, name: '巴西' }, { id: 9, name: '新西兰' }, { id: 10, name: '加拿大' }],
            // 表单校验
            rules: {
                companyName: [
                    {
                        required: true,
                        message: '企业名称不能为空',
                        trigger: 'blur'
                    }
                ],
                // addressProvice: [
                //     {
                //         required: true,
                //         message: "所在省不能为空",
                //         trigger: "blur"
                //     }
                // ],
                // addressCity: [
                //     {
                //         required: true,
                //         message: "所在市不能为空",
                //         trigger: "blur"
                //     }
                // ],
                // addressArea: [
                //     {
                //         required: true,
                //         message: "所在区不能为空",
                //         trigger: "blur"
                //     }
                // ],
                address: [
                    {
                        required: true,
                        message: '详细地址不能为空',
                        trigger: 'blur'
                    }
                ],
                contactPerson: [
                    {
                        required: true,
                        message: '联系人姓名不能为空',
                        trigger: 'blur'
                    }
                ],
                contactPhone: [
                    {
                        required: true,
                        message: '联系人手机号不能为空',
                        trigger: 'blur'
                    },
                    { pattern:/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: "请输入合法手机号/电话号", trigger: "blur" }
                ],
                contactEmail: [
                    {
                        required: true,
                        message: '公司邮箱不能为空',
                        trigger: 'blur'
                    },
                    { pattern:/^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g, message: "请输入正确的邮箱", trigger: "blur"}
                ],
                legalPerson: [
                    {
                        required: true,
                        message: '法人姓名不能为空',
                        trigger: 'blur'
                    }
                ],
                legalPhone: [
                    {
                        required: true,
                        message: '法人手机号不能为空',
                        trigger: 'blur'
                    }
                ],
                legalIdcard: [
                    {
                        required: true,
                        message: '法人身份证号不能为空',
                        trigger: 'blur'
                    },
                    {
                        min: 15,
                        max: 18,
                        message: '请如实填写18位身份证号码',
                        trigger: 'blur'
                    },
                    { pattern:/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/, message: "请输入合法身份证号", trigger: "blur"}
                ],
                legalIdcardFile: [
                    {
                        required: true,
                        message: '法人身份证附件不能为空',
                        trigger: 'blur'
                    }
                ],
                legalOperateFile: [
                    {
                        required: true,
                        message: '企业营业执照不能为空',
                        trigger: 'blur'
                    }
                ],
                businessScope: [
                    {
                        required: true,
                        message: '经营范围不能为空',
                        trigger: 'blur'
                    }
                ],
                operatingStartTime: [
                    {
                        required: true,
                        message: '营业期限不能为空',
                        trigger: 'blur'
                    }
                ],
                operatingEndTime: [
                    {
                        required: true,
                        message: '营业期限不能为空',
                        trigger: 'blur'
                    }
                ],
                companyCode: [
                    {
                        required: true,
                        message: '企业信用代码不能为空',
                        trigger: 'blur'
                    },
                    { pattern:/^[1-9A-GY]{1}[1239]{1}[1-5]{1}[0-9]{5}[0-9A-Z]{10}$/, message: "请输入正确的企业信用代码", trigger: "blur" }
                ],
                registerCountry: [
                    {
                        required: true,
                        message: '注册地国家不能为空',
                        trigger: 'blur'
                    }
                ]
            },
            checked: false, // 协议
            isshow: true,
            isshows: false,
            getAgreementCon: '',
            dialogVisible: false
        };
    },
    created() {
        getUserinfo(0).then(response => {
            this.form = response.data;

            // this.form.addressProvice = Number(this.form.addressProvice);
            // if (this.form.addressCity) {
            //     this.form.addressCity = Number(this.form.addressCity);
            //     this.getUrl(
            //         "/web/getAreaChild/" + this.form.addressProvice
            //     ).then(response => {
            //         this.cityOptions = response.data;
            //     });
            // }

            // if (this.form.addressArea) {
            //     this.form.addressArea = Number(this.form.addressArea);
            //     this.getUrl("/web/getAreaChild/" + this.form.addressCity).then(
            //         response => {
            //             this.areaOptions = response.data;
            //         }
            //     );
            // }

            var images = this.form.legalIdcardFile.split(',');
            var tmp = [];
            images.forEach(item => {
                if (item != '') {
                    tmp.push({
                        name: 'cdscs',
                        url: process.env.VUE_APP_BASE_API + item
                    });
                    this.legalIdcardFile.push(item);
                }
            });
            this.legalIdcardFile = tmp;

            var images = this.form.legalOperateFile.split(',');
            var tmp = [];
            images.forEach(item => {
                if (item != '') {
                    tmp.push({
                        name: 'cdscs',
                        url: process.env.VUE_APP_BASE_API + item
                    });
                    this.legalOperateFile.push(item);
                }
            });
            this.form.legalOperateFile = tmp;
        });

        // this.getUrl("/web/getArea/1").then(response => {
        //     this.provinceOptions = response.data;
        // });
        this.initStatus();
    },
    methods: {
        testfun() {
            this.$message.error('上传图片不能多余两张');
        },
        testfuns() {
            this.$message.error('上传图片不能多余两张');
        },
        fileChange() {
            console.log(this.form.legalIdcardFile);
        },
        initStatus: function() {
            getInfo().then(res => {
                // 认证状态 0未提交 1 提交审核 2 认证通过 3 认证不通过',
                if (res.ApplyStatus != '0' && res.ApplyStatus != '3') {
                    this.isshows = true;
                }
            });
        },
        idcardRemove(obj) {
            var tmpimg = obj.url.substr(8);
            this.legalIdcardFile.forEach((item, index) => {
                if (item == tmpimg) {
                    this.legalIdcardFile.splice(index, 1);
                }
            });
        },
        operateRemove(obj) {
            var tmpimg = obj.url.substr(8);
            this.legalOperateFile.forEach((item, index) => {
                if (item == tmpimg) {
                    this.legalOperateFile.splice(index, 1);
                }
            });
        },
        fieldBeforeUpload(file) {
            // this.imageUrl = URL.createObjectURL(file.raw);

            var isJPG = false;
            switch (file.type) {
                case 'image/png':
                    isJPG = true;
                    break;
                case 'image/jpeg':
                    isJPG = true;
                    break;
                case 'image/gif':
                    isJPG = true;
                    break;
                default:
                    isJPG = false;
                    break;
            }
            const isLt2M = file.size / 1024 / 1024 < 3;
            if (!isJPG) {
                this.$message.error('上传图片只能是 JPG/PNG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传图片大小不能超过 3MB!');
            }
            return isJPG && isLt2M;
        },

        idcardUploadSuccess(response, file) {
            // this.formInline.logFile = file.raw;
            if (response.code == 200) {
                this.legalIdcardFile.push(response.fileName);
            }
        },
        beforeAvatarUpload(file) {
            // const isJPG = file.type === 'image/jpeg'
        },
        operateUploadSuccess(response) {
            if (response.code == 200) {
                this.legalOperateFile.push(response.fileName);
            }
        },

        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                id: undefined,
                uid: undefined,
                companyName: undefined,
                addressProvice: undefined,
                addressCity: undefined,
                addressArea: undefined,
                address: undefined,
                contactPerson: undefined,
                contactPhone: undefined,
                contactEmail: undefined,
                legalPerson: undefined,
                legalPhone: undefined,
                legalIdcard: undefined,
                legalIdcardFile: [],
                legalOperateFile: [],
                businessScope: undefined,
                operatingStartTime: undefined,
                operatingEndTime: undefined,
                companyCode: undefined,
                companyWeb: undefined,
                companyPhone: undefined,
                companyIntro: undefined,
                quota: undefined,
                quotaStartTime: undefined,
                quotaEndTime: undefined,
                deposit: undefined
            };
            this.resetForm('form');
        },
        changecity(e) {
            this.form.addressCity = '';
            this.form.addressArea = '';
            this.getUrl('/web/getAreaChild/' + e).then(response => {
                this.cityOptions = response.data;
            });
        },
        changearea(e) {
            this.form.addressArea = '';
            this.getUrl('/web/getAreaChild/' + e).then(response => {
                this.areaOptions = response.data;
            });
        },

        /** 提交按钮 */
        submitForm: function() {
            this.form.legalIdcardFile = this.legalIdcardFile.join(',');

            this.form.legalOperateFile = this.legalOperateFile.join(',');
            this.$refs['form'].validate(valid => {
                if (valid) {
                    if (this.form.id != undefined) {
                        this.form.applyStatus = 1;
                        updateUserinfo(this.form).then(response => {
                            if (response.code === 200) {
                                this.msgSuccess('提交成功，等待后台审核。');
                                this.initStatus();
                                this.$router.push({ path: '/index' });
                            } else {
                                this.msgError(response.msg);
                            }
                        });
                    }
                }
            });
        },
        // saveBtn: function() {
        //     console.log(this.legalIdcardFile);
        //     console.log(this.legalOperateFile);
        //     this.form.legalIdcardFile = this.legalIdcardFile.join(",");
        //     this.form.legalOperateFile = this.legalOperateFile.join(",");
        //     console.log(this.form);
        //     if (this.form.id != undefined) {
        //         updateUserinfo(this.form).then(response => {
        //             if (response.code === 200) {
        //                 this.msgSuccess("保存成功");
        //             } else {
        //                 this.msgError(response.msg);
        //             }
        //         });
        //     }
        // },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids;
            this.$confirm('是否确认删除用户详情编号为"' + ids + '"的数据项?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(function() {
                    return delUserinfo(ids);
                })
                .then(() => {
                    this.getList();
                    this.msgSuccess('删除成功');
                })
                .catch(function() {});
        },
        /** 导出按钮操作 */
        handleExport() {
            const queryParams = this.queryParams;
            this.$confirm('是否确认导出用户详情数据项?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(function() {
                    return exportUserinfo(queryParams);
                })
                .then(response => {
                    this.download(response.msg);
                })
                .catch(function() {});
        },
        // 请求协议
        getAgreement() {
            Agreements2().then(res => {
                if (res.code == 200) {
                    this.getAgreementCon = res.data.content;
                    this.dialogVisible = true;
                }
            });
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss">
.location,
.container {
    display: block;
    overflow: hidden;
}
.location {
    display: flex;
}
.address {
    flex: 1;
}

.col-3 {
    display: flex;
}
.col-3 > div {
    flex: 1;
}
.col-3 > div input {
    width: 100% !important;
}
.col .el-date-editor {
    width: 440px !important;
}
.dialog-footer {
    text-align: center;
    margin: 0 auto;
}
.color-white .text {
    color: #333333 !important;
    margin-right: 10px;
}
.color-white {
    display: block;
    margin-bottom: 20px;
}
.color-white .text + span {
    color: #409eff !important;
}
.app-container .flex div {
    margin: 0 !important;
}
.userinfo .test {
    font-size: 10px;
    line-height: 14px;
    color: #F56C6C;
}
.userinfo .el-form-item  {
    margin-bottom: 22px !important;

}
</style>
